/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-26 15:05:35
 */
import React, { Component } from 'react';
import { Layout, Breadcrumb } from 'antd';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/radar';
import 'echarts/lib/chart/graph';
import './style.less';

export default class SafePortrait extends Component {    
    componentDidMount(){
        const { type } = JSON.parse(localStorage.getItem('userInfo'));
        if(type === 1){
            const radar = echarts.init(document.getElementById('radar')),
                graph = echarts.init(document.getElementById('graph'));
                
            radar.setOption({
                radar: {
                    indicator: [{
                        text: '信息保护',
                        max: 5000
                    }, {
                        text: '系统防护',
                        max: 5000
                    }, {
                        text: '安全教育',
                        max: 5000
                    }, {
                        text: '安全意识',
                        max: 5000
                    }, {
                        text: '事件响应',
                        max: 5000
                    }, {
                        text: '安全管理',
                        max: 8000
                    }],
                    radius: 90,
                    splitNumber: 9,
                    name: {
                        textStyle: {
                            color: '#201E1F'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#B3DBF5',
                            width: 2,
                            type: 'dotted'
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#B3DBF5', 'transparent', 'transparent', 'transparent'],
                            width: 1
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['#C1C1C1', '#fff']
                        }
                    }
                },
                series: [{
                    type: 'radar',
                    tooltip: {
                        trigger: 'item'
                    },
                    symbol: 'circle',
                    symbolSize: 5,
                    radius:'',
                    itemStyle: {
                    normal: {
                            areaStyle: {type: 'default'},
                            color: '#6aa9f6',
                            borderColor: '#368ffe',
                            shadowColor:'rgba(0,0,0,0.5)'
                        }
                    },
                    data: [{
                        value: [4075, 4364, 1115, 3750, 2700],
                        name:'投诉举报接受渠道'
                    }]
                }]
            })

            graph.setOption({
                animationDuration: 3000,
                animationEasingUpdate: 'quinticInOut',
                series: [{
                    name: '安全画像',
                    type: 'graph',
                    layout: 'force',
                    force: {
                        repulsion: 140
                    },
                    data: [{
                        "name": "安全画像",
                        "symbolSize": 20,
                        "draggable": "true",
                        "value": 27

                    }, {
                        "name": "系统防护",
                        "value": 3,
                        "symbolSize": 9,
                        "category": "系统防护",
                        "draggable": "true"
                    }, {
                        "name": "系统安全防御水平-外网监测",
                        "symbolSize": 3,
                        "category": "系统防护",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "系统安全防御水平-年度巡检",
                        "symbolSize": 3,
                        "category": "系统防护",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "系统安全防御水平-申请复测",
                        "symbolSize": 3,
                        "category": "系统防护",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "城市信息安全年会系统防护优秀方案介绍",
                        "symbolSize": 3,
                        "category": "系统防护",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "信息保护",
                        "value": 3,
                        "symbolSize": 9,
                        "category": "信息保护",
                        "draggable": "true"
                    }, {
                        "name": "信息泄密事件",
                        "symbolSize": 3,
                        "category": "信息保护",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "涉密网及保密信息培训",
                        "symbolSize": 3,
                        "category": "信息保护",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "城市信息安全年会信息保护经验分享",
                        "symbolSize": 3,
                        "category": "信息保护",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "安全教育",
                        "value": 3,
                        "symbolSize": 9,
                        "category": "安全教育",
                        "draggable": "true"
                    }, {
                        "name": "单位开展实地安全技术培训教育活动",
                        "symbolSize": 3,
                        "category": "安全教育",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "单位开展实地安全法律法规培训教育活动",
                        "symbolSize": 3,
                        "category": "安全教育",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "单位工作人员进行安全云课堂听课活动",
                        "symbolSize": 3,
                        "category": "安全教育",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "城市信息安全年会安全教育经验分享",
                        "symbolSize": 3,
                        "category": "安全教育",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "安全管理",
                        "value": 3,
                        "symbolSize": 9,
                        "category": "安全管理",
                        "draggable": "true"
                    }, {
                        "name": "公安等保测评整改计划",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "公安等保测评整改方案",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "公安等保测评整改计划履行程度",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "风险评估测评报告备案",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "风险评估测评报告整改计划",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "风险评估测评整改计划履行程度",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "单位信息安全领导小组",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "城市信息安全年会参会情况",
                        "symbolSize": 3,
                        "category": "安全管理",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "事件响应",
                        "value": 3,
                        "symbolSize": 9,
                        "category": "事件响应",
                        "draggable": "true"
                    }, {
                        "name": "平台已监控风险的修复时间",
                        "symbolSize": 3,
                        "category": "事件响应",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "上级政府通报问题的修复确认上报时间",
                        "symbolSize": 3,
                        "category": "事件响应",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "多单位配合联合响应配合评价",
                        "symbolSize": 3,
                        "category": "事件响应",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "安全意识",
                        "value": 3,
                        "symbolSize": 9,
                        "category": "安全意识",
                        "draggable": "true"
                    }, {
                        "name": "单位工作人员不合规/非法言论",
                        "symbolSize": 3,
                        "category": "安全意识",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "安全意识年考",
                        "symbolSize": 3,
                        "category": "安全意识",
                        "draggable": "true",
                        "value": 1
                    }, {
                        "name": "安全意识培训视频上传",
                        "symbolSize": 3,
                        "category": "安全意识",
                        "draggable": "true",
                        "value": 1
                    }],
                    links: [{
                        "source": "安全画像",
                        "target": "系统防护"
                    }, {
                        "source": "系统防护",
                        "target": "系统安全防御水平-外网监测"
                    }, {
                        "source": "系统防护",
                        "target": "系统安全防御水平-年度巡检"
                    }, {
                        "source": "系统防护",
                        "target": "系统安全防御水平-申请复测"
                    }, {
                        "source": "系统防护",
                        "target": "城市信息安全年会系统防护优秀方案介绍"
                    }, {
                        "source": "安全画像",
                        "target": "信息保护"
                    }, {
                        "source": "信息保护",
                        "target": "信息泄密事件"
                    }, {
                        "source": "信息保护",
                        "target": "涉密网及保密信息培训"
                    }, {
                        "source": "信息保护",
                        "target": "城市信息安全年会信息保护经验分享"
                    }, {
                        "source": "安全画像",
                        "target": "安全教育"
                    }, {
                        "source": "安全教育",
                        "target": "单位开展实地安全技术培训教育活动"
                    }, {
                        "source": "安全教育",
                        "target": "单位开展实地安全法律法规培训教育活动"
                    }, {
                        "source": "安全教育",
                        "target": "单位工作人员进行安全云课堂听课活动"
                    }, {
                        "source": "安全教育",
                        "target": "城市信息安全年会安全教育经验分享"
                    }, {
                        "source": "安全画像",
                        "target": "安全管理"
                    }, {
                        "source": "安全管理",
                        "target": "公安等保测评整改计划"
                    }, {
                        "source": "安全管理",
                        "target": "公安等保测评整改方案"
                    }, {
                        "source": "安全管理",
                        "target": "公安等保测评整改计划履行程度"
                    }, {
                        "source": "安全管理",
                        "target": "风险评估测评报告备案"
                    }, {
                        "source": "安全管理",
                        "target": "风险评估测评报告整改计划"
                    }, {
                        "source": "安全管理",
                        "target": "风险评估测评整改计划履行程度"
                    }, {
                        "source": "安全管理",
                        "target": "单位信息安全领导小组"
                    }, {
                        "source": "安全管理",
                        "target": "城市信息安全年会参会情况"
                    }, {
                        "source": "安全画像",
                        "target": "事件响应"
                    }, {
                        "source": "事件响应",
                        "target": "平台已监控风险的修复时间"
                    }, {
                        "source": "事件响应",
                        "target": "上级政府通报问题的修复确认上报时间"
                    }, {
                        "source": "事件响应",
                        "target": "多单位配合联合响应配合评价"
                    }, {
                        "source": "安全画像",
                        "target": "安全意识"
                    }, {
                        "source": "安全意识",
                        "target": "单位工作人员不合规/非法言论"
                    }, {
                        "source": "安全意识",
                        "target": "安全意识年考"
                    }, {
                        "source": "安全意识",
                        "target": "安全意识培训视频上传"
                    }],
                    categories: [{
                        'name': '系统防护'
                    }, {
                        'name': '信息保护'
                    }, {
                        'name': '安全教育'
                    }, {
                        'name': '安全管理'
                    }, {
                        'name': '事件响应'
                    }, {
                        'name': '安全意识'
                    }],
                    focusNodeAdjacency: true,
                    roam: true,
                    label: {
                        normal: {

                            show: true,
                            position: 'top',

                        }
                    },
                    lineStyle: {
                        normal: {
                            color: 'source',
                            curveness: 0,
                            type: "solid"
                        }
                    }
                }]
            })
        }
    }

    renderQy(){
        return(
            <div style={{padding: '55px 50px'}}>
                <h1 style={{textAlign: 'left',fontSize: '24px'}}>单位当前排名<em style={{color: '#ff0000',fontSize: '40px',margin: '0 10px'}}>20</em>名</h1>
                <div className="overflow">
                    <div className="fl" id="radar" style={{width: '350px',height: '260px'}}/>
                    <div className="fr" id="graph" style={{width: '700px',height: '400px'}}/>
                </div>                
                <img src={require('@/static/images/hx-1.png')} alt=""  style={{width: '100%',marginTop: '50px'}} />
            </div>
        )
    }

    renderFws(){
        return(
            <img src={require('@/static/images/hx-2.png')} alt=""  style={{width: '80%',marginTop: '50px'}}/>
        )
    }

    renderCs(){
        return(
            <img src={require('@/static/images/hx-3.png')} alt=""  style={{width: '80%',marginTop: '50px'}}/>
        )
    }

    renderGr(){
        return(
            <div className="talent-info">
                <div className="center">
                    <div className="overflow">
                        <div className="name">
                            <img src={require('@/static/images/talent-1.png')} alt=""/>
                            <h1>张强</h1>
                            <p>渗透测试</p>
                        </div>
                        <div className="info">
                            <h1>基本信息</h1>
                            <p><span>生日：</span><span>1993年8月10日</span></p>
                            <p><span>毕业学校：</span><span>海南大学</span></p>
                            <p><span>学历：</span><span>本科</span></p>
                            <p><span>安全行业工龄：</span><span>3年</span></p>
                            <p><span>专业：</span><span>计算机</span></p>
                            <p><span>手机：</span><span>13788888888</span></p>
                            <p><span>邮箱：</span><span>888888@qq.com</span></p>
                        </div>
                        <img src={require('@/static/images/talent-1.jpg')} alt="" className="skill"/>
                    </div>
                    <div className="type">
                        <ul>
                            <li className="active">工作经历</li>
                            <li>教育培训</li>
                            <li>教育经历</li>
                            <li>主修课程</li>
                            <li>获得荣誉</li>
                        </ul>
                    </div>
                    <div className="context">
                        <ul>
                            <li>
                                <h1>2015.01-2015.12 / 连云港三众科技 / 实习生</h1>
                                <p>1. 负责业务系统的日常安全测试，引导开发人员修复安全漏洞</p>
                                <p>2. 负责线上环境的渗透测试和web漏洞挖掘</p>
                                <p>3. 编写安全解决方案，协助技术修复安全漏洞</p>
                            </li>
                            <li>
                                <h1>2016.01-2018.05 / 连云港聚源网络科技有限公司 / 渗透测试工程师</h1>
                                <p>1. 漏洞的发掘，授权情况下进行深度的安全测试</p>
                                <p>2. 响应并解决稍高难度的安全渗透测试服务</p>
                                <p>3. 跟踪国际/国内安全社区的安全动态，进行安全漏洞分析、研究与挖掘，并进行预警</p>
                            </li>
                        </ul>
                    </div>
                    <img src={require('@/static/images/talent-2.jpg')} alt=""/>
                    <div className="work">
                        <ul>
                            <li className="none">
                                <span>作品类型</span>
                                <span>作品名称</span>
                                <span>作品地址</span>
                            </li>
                            <li>
                                <span>原创程序</span>
                                <span>原创程序原创程序原创程序原创程序原创程序原创程序原创程序</span>
                                <span>www.bjahsiadosid.com</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        const { type } = JSON.parse(localStorage.getItem('userInfo'));
        return (
            <Layout style={{ padding: '0 24px 24px' }}>
                <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item>安全画像</Breadcrumb.Item>
                </Breadcrumb>
                <Layout.Content style={{ background: '#fff', padding: '0 50px', margin: 0, textAlign: 'center' }}>
                    {
                        type===1 ? this.renderQy() : (type===2 ? this.renderFws() : (type===3 ? this.renderCs() : this.renderGr()))
                    }
                </Layout.Content>
            </Layout>                       
        );
    }
}